<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并问题</title>
		<style>
			/* 父级元素设置：宽高、边框 */
			div. parent{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				margin-bottom: 150px;
			}
			div. son{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				margin-top: 149px;
			}
			/* 以上【外边距垂直合并】1.外部外边距垂直会合并，最大值为准
			                        建议：最小的外边距删掉
			 */
			div.parent{
				width: 300px;
				height: 300px;
				/* 填充:没有空间 */
				background-color: #a7a7a7;
				/* 上外边距：100px */
				margin-top: 100px;
				/* 推荐：找到父级元素加溢出隐藏，父级元素隐藏，余出空间，正常加外边距 */
				over flow: auto;
				/* 建议：找到父级元素加边框 */
				bor der: 1px solid transparent;
				/* 不推荐：内边距占空间，找到发生问题的位置 */
				padding-top: 1px;
			}
			div.son{
				width: 100px;
				height: 100px;
				background-color: #f00;
				/* 上外边距：40px */
				margin-top: 110px;
			}
			/* 以上【外边距垂直合并】2.【内部】外边距垂直会合并，最大值为准
			                          解决方案：①溢出隐藏，转换为块级上下文结构
									            找到父元素添加 overflow:hidden或者auto
												②加1个元素，透明边框，具体的位置内边距
												找到父元素添加：border或者padding:1px
			 */
		</style>
	</head>
	<body>
		<div class="parent">
		<div class="son"></div>
		</div>
	</body>
</html>